<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="数据源" prop="sourceId">
        <el-select v-model="queryParams.sourceId" placeholder="请选择数据源" clearable size="small" @keyup.enter.native="handleQuery">
          <el-option label="全部" value="" />
          <el-option
            v-for="item in sourceList"
            :key="item.sourceId"
            :label="item.webTitle"
            :value="item.sourceId"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="标记" prop="collectionId">
        <el-select v-model="queryParams.collectionId" placeholder="请选择标记" clearable size="small" @keyup.enter.native="handleQuery">
          <el-option
            v-for="item in collectionList"
            :key="item.id"
            :label="item.altName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="标签" prop="labels">
        <el-input
          v-model="queryParams.labels"
          placeholder="请输入标签"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>      
      <el-form-item label="发布时间">
        <el-date-picker
          v-model="daterangeCreateTime"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['information:article:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['information:article:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['information:article:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :disabled="multiple"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['information:article:export']"
        >导出所选</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleAllExport"
          v-hasPermi="['information:article:export']"
        >导出列表</el-button>
      </el-col>
      <!-- 单篇文章启动爬虫更新 -->
      <el-col :span="1.5">
        <el-tooltip placement="top">
          <div slot="content">启动爬虫任务，更新指定文章数据</div>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :disabled="single"
            @click="handleCrawlerUpdate"
            v-hasPermi="['information:article:crawler']"
          >重新获取全文</el-button>
        </el-tooltip>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-share"
          size="mini"
          :disabled="multiple"
          @click="addToCollection"
          v-hasPermi="['information:collection:list']"
        >添加标记</el-button>
      </el-col> -->

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="articleList" @selection-change="handleSelectionChange" ref="multipleTable" @select="handleSelect" @select-all="handleSelectAll">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column label="原始标题" width="400">
        <template slot-scope="scope">
          <a :href=scope.row.url target="_blank" :title=scope.row.titleOrg>{{scope.row.titleOrg}}</a>
        </template>
      </el-table-column>
      <el-table-column label="中文标题" width="400">
        <template slot-scope="scope">
          <a :href=scope.row.url target="_blank" :title=scope.row.titleCn>{{scope.row.titleCn}}</a>
        </template>
      </el-table-column>
      <!-- <el-table-column label="所属标记" align="center" prop="collName" /> -->
      <el-table-column label="标签" align="center" prop="labels" />
      <el-table-column label="发布机构" align="center" prop="publisher" />
      <el-table-column label="发布时间" align="center" prop="publishFormatTime" />
      <el-table-column label="数据源" align="center" prop="bizSource.webTitle" />
      <el-table-column label="获取时间" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>      
      <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-search"
            @click="handleView(scope.row)"
            v-hasPermi="['information:multimodal_file:list']"
          >预览</el-button>            
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['information:article:edit']"
          >修改</el-button>
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-notebook-2"
            @click="handleTrans(scope.row)"
            v-hasPermi="['information:article:trans']"
          >翻译</el-button> -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['information:article:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改信息管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="avator" prop="avator">
          <el-input v-model="form.avator" v-show="false" />
          <input type="file" accept="image/*" @change="changeImage()" ref="avatarInput" style="display:none" />
          <img v-bind:src="avator" v-if="showImage" width="600px"/>
          <div class="pic_list_box">
            <div class="pic_list" v-show="imgDatas.length">
              <div v-for="(src,index) in imgDatas" :key="index" >
                <el-image style="width: 100%" :src="src" :preview-src-list="imgDatas"></el-image>
              </div>
            </div>
            <el-button type="primary" @click="upLoad">上 传</el-button>
          </div>
        </el-form-item>
        <el-form-item label="原始标题" prop="titleOrg">
          <el-input v-model="form.titleOrg" placeholder="请输入原始标题" />
        </el-form-item>
        <el-form-item label="发布机构" prop="publisher">
          <el-input v-model="form.publisher" placeholder="请输入发布机构" />
        </el-form-item>
        <el-form-item label="摘要" prop="summaryOrg">
          <el-input v-model="form.summaryOrg" type="textarea" placeholder="请输入内容" />
          <el-button type="primary" @click="extractAbstract">生成摘要</el-button>
        </el-form-item>
        <el-form-item label="发布时间" prop="publishFormatTime">
          <el-input v-model="form.publishFormatTime" placeholder="请输入发布时间" />
        </el-form-item>
        <el-form-item label="全文" prop="contentsOrg">
          <Editor ref="myQuillEditor" v-model="form.contentsOrg" />
        </el-form-item>
        <el-form-item label="标签" prop="labels">
          <el-input v-model="form.labels" placeholder="请输入标签" />
        </el-form-item>        
        <el-form-item label="原始URL" prop="url">
          <el-input v-model="form.url" placeholder="请输入原始URL" />
        </el-form-item>
        <el-form-item label="数据源" prop="sourceId">
          <el-select v-model="form.sourceId" placeholder="请选择数据源">
            <el-option
              v-for="item in sourceList"
              :key="item.sourceId"
              :label="item.webTitle"
              :value="item.sourceId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加收藏对话框 -->
    <!-- 添加或修改我的收藏对话框 -->
    <el-dialog :title="collectionTitle" :visible.sync="collectionOpen" width="500px" append-to-body>
      <el-form ref="collectionForm" :model="collectionForm" :rules="collectionRules" label-width="80px">
        <el-form-item label="我的收藏" prop="id">
          <el-select v-model="collectionForm.id" placeholder="请选择收藏" clearable size="small">
            <el-option label="全部" key="" value="" />
            <el-option
              v-for="item in collectionList"
              :key="item.id"
              :label="item.altName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCollectionForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 文章详情预览弹窗 -->
    <el-dialog :title="dataPageViewTitle" :visible.sync="dataPageViewOpen" width="900px" append-to-body
      :fullscreen="dialogFullScreen" :class="[dialogFullScreen ? 'fullscreen' : 'no_fullscreen']">
      <div class="search-box">
        <h2 class="titleOrg" v-if="isShow">{{detailData.titleOrg}}</h2>
        <!-- 页面上方添加关闭按钮，方便操作 -->
        <span slot="header" class="dialog-header">
          <el-row type="flex" justify="end">
            <el-col>
              <el-button type="text" @click="closeDialog">[关闭本页]</el-button>
            </el-col>
          </el-row>
        </span>
        <div class="summary-text" v-html="detailData.summaryOrg" v-if="typeof detailData.summaryOrg!='undefined' && detailData.summaryOrg!=null && detailData.summaryOrg!=''"></div>
        <div class="detail-text" v-html="showHtml(detailData.contentsOrg)"></div>

        <!-- <el-descriptions v-if="isShow" class="margin-top" title="列表" :column="1" direction="horizontal" border style="margin-top: 30px">
          <el-descriptions-item label="发布时间">{{ detailData.publishTime }}</el-descriptions-item>
          <el-descriptions-item label="研究机构">{{ detailData.researchAgency }}</el-descriptions-item>
          <el-descriptions-item label="研究人员" :span="2">{{ detailData.researchGroup }}</el-descriptions-item>
          <el-descriptions-item label="研究团队">{{ detailData.researchGroup }}</el-descriptions-item>
          <el-descriptions-item label="研究进展">{{ detailData.researchProgress }}</el-descriptions-item>
          <el-descriptions-item label="研究成果">{{ detailData.researchResults }}</el-descriptions-item>
          <el-descriptions-item label="科研评价">{{ detailData.researchEvaluation }}</el-descriptions-item>
          <el-descriptions-item label="原文链接">
            <el-tag size="small" style="cursor:pointer;" @click="goHtml">
              {{ detailData.url }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions> -->

        <!-- <el-tabs v-if="isShow" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="图片" name="first">
            <el-image
              style="width: 300px; height: 200px"
              :src="url"
              fit="contain"
              :preview-src-list="[url]"
              >
            </el-image>
          </el-tab-pane>
          <el-tab-pane label="视频" name="second">
            <video
              style="width: 300px; height: 150px;"
              @click="openVideo(item)"
              v-for="item in detailData.bizVedioList"
              :src="item.contentsCn"
              :poster="item.avator"
            ></video>
          </el-tab-pane>
        </el-tabs> -->
        
        <el-divider content-position="left"></el-divider>

        <span slot="footer" class="dialog-footer">
          <el-button type="text" @click="closeDialog">[关闭本页]</el-button>
        </span>
      </div>
    </el-dialog>

    <!-- 播放视频弹窗 -->
    <el-dialog
      :visible.sync="videoDialog"
      width="65.5%"
      center
      class="videoPlayer"
    >
      <div>
        <video-player
          ref="videoPlayer"
          class="video-player vjs-big-play-centered"
          :playsinline="false"
          :options="playerOptions"
          @ready="onPlayerReady"
          @play="onPlayerPlay($event)"
          @pause="onPlayerPause($event)"
          @ended="onPlayerEnd($event)"
        />
      </div>
    </el-dialog>


    <!-- 添加或修改信息管理对话框(废弃不用) -->
    <el-dialog :title="expressTitle" :visible.sync="expressOpen" width="900px" append-to-body>
      <el-form ref="form" :model="expressForm" :rules="expressRules" label-width="80px">
        <el-form-item label="快报主题" prop="topic">
          <el-input v-model="expressForm.topic" placeholder="请输入快报主题" />
        </el-form-item>
        <el-form-item label="年份" prop="year">
          <el-input v-model="expressForm.year" placeholder="请输入年份" />
        </el-form-item>
        <el-form-item label="当前期" prop="issue">
          <el-input v-model="expressForm.issue" placeholder="请输入当前期" />
        </el-form-item>
        <el-form-item label="总期" prop="totalIssue">
          <el-input v-model="expressForm.totalIssue" placeholder="请输入总期" />
        </el-form-item>
        <el-form-item label="出版者" prop="publisher">
          <el-input v-model="expressForm.publisher" placeholder="请输入出版者" />
        </el-form-item>
        <el-form-item label="编者" prop="author">
          <el-input v-model="expressForm.author" placeholder="请输入编者" />
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="expressForm.contact" placeholder="请输入联系人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="expressForm.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="expressForm.email" placeholder="请输入邮箱" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExpressForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listArticle, getArticle, delArticle, addArticle, updateArticle, exportArticle, extractAbstract, trans, exportWord, exportAllArticle, callCrawlerByUrl } from "@/api/information/article";
import { listSources, getSources, delSources, addSources, updateSources, exportSources, updateSourcesLabel } from "@/api/information/sources";
import {
  listCollection,
  getCollection,
  delCollection,
  addCollection,
  updateCollection,
  exportCollection,
  addToCollection,
  getMyCollection
} from "@/api/information/collection";
// import { videoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'

export default {
  name: "Article",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 信息管理表格数据
      articleList: [],
      multipleSelection:[],
      collectionList: [],
      myCollection:null,
      myCollectionIds:[],
      collectionSize:0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 发布时间
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        sourceId: null,
        collectionId: null,
        labels: null,
        publishFormatTime: null,
      },
      collectionParams:{
        articleIds:null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        dataKey: [
          { required: true, message: "dataKey不能为空", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
      },
      sourceList:[],
      imgDatas: [],
      avator:null,
      showImage:true,
      expressOpen:false,
      expressTitle: "",
      expressForm:{},
      expressRules:{
        dataKey: [
          { required: true, message: "dataKey不能为空", trigger: "blur" }
        ],
      },
      collectionTitle: "",
      collectionOpen:false,
      collectionForm:{},
      collectionRules:{
        id: [
          { required: true, message: "请选择收藏", trigger: "blur" }
        ],
      },

      // 文章详情预览
      dataPageViewTitle: "文章详情",
      dataPageViewOpen: false,
      dialogFullScreen: true,
      detailData: {},
      isShow:true,
      activeName: 'first',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',

      videoDialog: false,

    };
  },
  created() {
    this.getSourceList();
    this.getList();
    this.getCollectionList();
    //this.getMyCollection();
  },
  methods: {
    getSourceList(){
      this.loading = true;
      listSources().then(response => {
        this.sourceList = response.rows;
      });
    },
    getCollectionList(){
      this.loading = true;
      listCollection().then(response => {
        this.collectionList = response.rows;
      });
    },
    getMyCollection(){
      getMyCollection().then(response => {
        this.myCollection = response.data;
        if (null != this.myCollection){
          this.myCollectionIds = this.myCollection.articleIds.split(",");
          this.collectionSize = this.myCollectionIds.length;
        }
      });
    },
    // 全选按钮同步选中信息
    handleSelectAll (selection) {
      this.articleList.map(row => {
        const index = this.multipleSelection.findIndex(e => e.id === row.id)
        // 全选，将选项加入 multipleSelection
        if (selection.length && index === -1) {
          this.multipleSelection.push(row)
        }
        // 取消全选，将选项从 multipleSelection 中移除
        if (!selection.length && index > -1) {
          this.multipleSelection.splice(index, 1)
        }
      });
    },
    // 单行选中按钮同步选中信息
    handleSelect (selection, row) {
      // 同步选中的数据到 multipleSelection
      const index = this.multipleSelection.findIndex(e => e.id === row.id)
      if (index > -1) {
        this.multipleSelection.splice(index, 1)
      } else {
        this.multipleSelection.push(row)
      }
    },
    handleCollection(){
      this.collectionOpen = true;
    },
    /** 提交按钮 */
    submitCollectionForm() {
      const ids = [];
      this.multipleSelection.forEach(function(item, index, obj){
        ids.push(item.id);
      })
      this.$refs["collectionForm"].validate(valid => {
        if (valid) {
          this.collectionForm.articleIds = ids.join(",");
          addToCollection(this.collectionForm).then(response => {
            this.$modal.msgSuccess("标记成功");
            this.collectionOpen = false;
          });
        }
      });
    },
    addToCollection(){
      const ids = [];
      this.multipleSelection.forEach(function(item, index, obj){
        ids.push(item.id);
      })
      this.collectionForm.articleIds = ids.join(",");
      //this.collectionForm.id = 2;
      this.collectionOpen = true;
      /*
      addToCollection(this.collectionForm).then(response => {
        this.$modal.msgSuccess("标记成功")
        this.collectionSize = this.multipleSelection.length;
      });
       */
    },
    setMyCollectionIds(){
      this.multipleSelection = [];
      this.collectionParams.articleIds = this.myCollectionIds.join(",");
      listArticle(this.collectionParams).then(response => {
        this.multipleSelection.push(...response.rows)
      });
      this.toggleSelection(this.multipleSelection, this.articleList);
      this.getList();
    },
    // 选中信息回显到页面中
    toggleSelection (selection, list) {
      if (!selection.length || !list.length) return
      list.map(item => {
        const index = selection.findIndex(e => {
          return e.id === item.id
        })
        if (index > -1) {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(item)
          })
        }
      })
    },
    /** 查询信息管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams.params["beginPublishTime"] = this.daterangeCreateTime[0];
        this.queryParams.params["endPublishTime"] = this.daterangeCreateTime[1];
      }
      listArticle(this.queryParams).then(response => {
        this.articleList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.toggleSelection(this.multipleSelection, this.articleList);
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.collectionOpen = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        dataKey: null,
        avator: null,
        titleOrg: null,
        titleCn: null,
        publisher: null,
        summaryOrg: null,
        summaryCn: null,
        publishTime: null,
        contentsOrg: null,
        contentsCn: null,
        labels: null,
        url: null,
        sourceId: null,
        createTime: null,
        tenantId: null,
        publishFormatTime:null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.multipleSelection)
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.imgDatas=[];
      this.avator = null;
      const id = row.id || this.ids
      console.log("handleUpdate-ID:", id);
      getArticle(id).then(response => {
        this.form = response.data;
        console.log(response.data.avator.startsWith("http"))
        if (response.data.avator.startsWith("http")){
          this.avator = response.data.avator;
        } else if(response.data.avator != '') {
          this.avator = process.env.VUE_APP_BASE_API+response.data.avator;
        }
        this.showImage = true;
        this.title = "修改信息管理";
        this.open = true;
      });
    },
    handleTrans(row){
      trans(row.id).then(response => {
        this.getList();
      });
    },
    // 对单篇文章启动爬虫更新
    handleCrawlerUpdate(){
      if(this.ids.length<=0){
        console.log("请选择数据!");
        return;
      }
      var id = this.ids[0]
      console.log("handleCrawlerUpdate-ID:", id);
      callCrawlerByUrl(id).then(response => {
        this.getList();
      });
    },
    /** TODO 预览：可文章显示，包括图片、视频、音频预览 */
    handleView(row){
      //TODO 
      this.detailData = row;
      this.dataPageViewOpen = true;
      console.log("TODO...");
    },
    closeDialog(){
      this.dataPageViewOpen = false;
    },

    showHtml(htmlContents){
      if(typeof htmlContents == 'undefined' || htmlContents == null || htmlContents.trim() == ""){
        return htmlContents;
      }

      // 不生效：调整html中图片样式居中边距等
      // const regex = /<img\b[^>]*>/gi;
      // const result = htmlContents.match(regex);

      // console.log(result);
      // if(result.length>0){
      //   for(var i=0; i<result.length; i++){
      //     var origUrl = result[i];
      //     var newUrl = origUrl.replace('<img src=', '<img class="detail-image" src=');
      //     console.log("test:", origUrl, newUrl);
      //     htmlContents = htmlContents.replace(origUrl, newUrl);
      //   }
      // }
      return htmlContents;
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateArticle(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addArticle(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除信息管理编号为"' + ids + '"的数据项？').then(function() {
        return delArticle(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const ids = [];
      this.multipleSelection.forEach(function(item, index, obj){
        ids.push(item.id);
      })
      this.$modal.confirm('是否导出所选项？').then(() => {
        this.exportLoading = true;
        return exportArticle(ids);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },
    handleAllExport(){
      const queryParams = this.queryParams;
      this.$modal.confirm('是否导出结果页？').then(() => {
        this.exportLoading = true;
        return exportAllArticle(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    },
    changeImage() {
      this.imgDatas=[];
      // 上传图片事件
      var files = this.$refs.avatarInput.files;
      var that = this;
      function readAndPreview(file) {
        if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
          var reader = new FileReader();
          reader.onload = function(e) {
            // 防止重复上传
            if (that.imgDatas.indexOf(e.target.result) === -1) {
              that.imgDatas.push(e.target.result);
            }
          };
          reader.readAsDataURL(file);
        }
      }
      readAndPreview(files[0])
      if (files.length === 0) {
        return;
      }
      // 文件上传服务器
      this.setUploadFile(files[0])
    },
    setUploadFile(file) {
      this.formData = new FormData()
      this.formData.append('file', file, file.name) // 添加到请求体
      uploadAvator(this.formData).then(response => {
        console.log(response)
        this.avator = response.fileName;
        this.form.avator = response.fileName;
        this.showImage = false;
      });
    },
    upLoad() {
      // 触发上传图片按钮
      this.$refs.avatarInput.dispatchEvent(new MouseEvent("click"));
    },
    extractAbstract(){
      extractAbstract(this.$refs.myQuillEditor.Quill.getText()).then(response => {
        this.form.summaryOrg = response.msg;
      })
    },
    handleWordInfo(row) {
      const ids = row.id || this.ids;
      exportWord(ids).then(response =>{
        let data = new Blob([response], { type: 'application/msword,charset=utf-8' });
        if (typeof window.chrome !== 'undefined') {
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(data);
          link.download = "生成报告";
          link.click();
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // IE
          var blob = new Blob([data], { type: 'application/force-download' });
          window.navigator.msSaveBlob(blob, "生成报告");
        } else {
          // Firefox
          var file = new File([data], "生成报告", { type: 'application/force-download' });
          window.open(URL.createObjectURL(file));
        }
      })
    },
    /** 提交按钮 */
    submitExpressForm() {
      console.log(this.ids);
      this.$refs["expressForm"].validate(valid => {
        if (valid) {
          exportWord(this.expressForm).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.expressOpen = false;
            this.getList();
          });
        }
      });
    },

    //
    playerOptions () {
      const playerOptionsObj = {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //视频播放速度
        autoplay: false, // 如果true，浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）。
        language: 'zh-CN',
        // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）。
        fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4',	// 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。
          src: this.mp4Url // 视频url地址
        }],
        poster: this.mp4Pic, // 视频封面地址
        // width: document.documentElement.clientWidth,
        width: 1200,
        height: this.fileAreaHeight,	// 设置高度，fluid需要设置成flase
        notSupportedMessage: '此视频暂无法播放...', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true,  // 显示持续时间
          remainingTimeDisplay: false,  // 是否显示剩余时间功能
          fullscreenToggle: true  //全屏按钮
        }
      }
      return playerOptionsObj
    },

    openVideo(item) {
      this.videoDialog = true;
      this.mp4Url = item.contentsCn;
      this.mp4Pic = item.avator;
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    // 准备好了
    onPlayerReady(v) {
      console.log(1)
      console.log(v)
    },
    // 播放了
    onPlayerPlay(v) {
      console.log(2)
      console.log(v)
    },
    // 暂停了
    onPlayerPause(v) {
      console.log(3)
      console.log(v)
    },
    // 播放结束了
    onPlayerEnd(v) {
      console.log(4)
      console.log(v)
    },

  }
};
</script>
<style scoped>
.videoPlayer /deep/ .el-dialog,
.search-box {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 30px;
}
.titleOrg {
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}
.summary-text {
    margin: 16px 0 28px;
    background: #EFF5FF;
    border-radius: 16px 16px 16px 16px;
    padding: 18px 24px;
    font-size: 16px;
    line-height: 27px;
}

/* 控制v-html中图片居中 */
.detail-text ::v-deep img,   /* 此行非必须 */
.detail-text >>> img {
    max-width: 100% ;
    display: block;
    margin: 0 auto; /* 图片居中对齐 */
}
.detail-text {
  margin-bottom: 40px;
}

/* .detail-image {
  display: block;
  margin: 10% auto;
  width: 50%;
} */

.fullscreen /deep/ .el-dialog {
    width: 100%;
  }

.no_fullscreen /deep/ .el-dialog {
    width: 40%;
  }

.dialog-header {
  text-align: right;
}
</style>